<template>
  <div v-loading="loading" class="afterSaleDescription">
    <div class="title">
      <h3>售后说明</h3>
    </div>
    <el-form
      v-if="formData"
      ref="rentForm"
      :rules="{
        afterThatContent : [
          { max: 5000, message: '内容长度超过5000个字符', trigger: 'blur' }
        ]
      }"
      :model="formData"
      label-width="120px"
      label-position="top"
      class="form"
    >

      <el-form-item label="租赁商品售后说明" prop="afterThatContent">
        <WangEditor ref="rentEditor0" v-model="formData.afterThatContent" />
      </el-form-item>
    </el-form>
    <div class="footer">
      <el-button type="primary" @click="onSubmitRent">保存</el-button>
      <el-button @click="resetRentForm">重置</el-button>
    </div>
  </div>
</template>

<script>
import { Loading } from 'element-ui'
import { getRentDescription, setRentDescription } from '@/api/commodity'
import WangEditor from '../../components/WangEditor/index'

/** 说明设置 */
export default {
  name: 'AfterSaleDescription',
  components: { WangEditor },
  data() {
    return {
      loading: false,
      formData: null
    }
  },
  created() {
    this.loadSetting()
  },
  methods: {
    loadSetting() {
      const vm = this
      vm.loading = true
      vm.formData = null
      getRentDescription({ type: 2 }).then(res => {
        const formData = {
          type: 2,
          afterThatContent: res.data.data.afterThatContent ? res.data.data.afterThatContent : '' // 租赁须知
        }
        vm.formData = formData
        vm.loading = false
      }).catch((res) => {
        vm.loading = false
        if (res && res.data && res.data.errno !== 0) {
          this.$message.error(`${res.data.errmsg}（${res.data.errno}）`)
        }
      })
    },
    // 菜单事件
    handleSelect(index) {
      this.activeIndex = index
    },
    // 提交
    onSubmitRent() {
      const vm = this

      vm.$refs.rentForm.validate((valid) => {
        if (valid) {
          this.$confirm('确定保存设置吗?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            const loadingInstance = Loading.service({ fullscreen: true })
            const data = vm.$XEUtils.clone(vm.formData, true)
            data['type'] = 2
            setRentDescription(data).then(res => {
              loadingInstance.close()
              vm.$message.success('保存成功')
              vm.loadRentSetting()
            }).catch(res => {
              loadingInstance.close()
              if (res && res.data && res.data.errno !== 0) {
                vm.$message.error(`${res.data.errmsg}（${res.data.errno}）`)
              }
            })
          })
        }
      })
    },
    resetRentForm() {
      const vm = this
      vm.$refs.rentForm.resetFields()
      vm.$forceUpdate()
    }
  }
}
</script>

<style lang="scss" scoped>
.afterSaleDescription {
  padding: 30px;
  ::v-deep .el-menu.el-menu--horizontal {
    border-bottom: none;
  }
  .form {
    margin-top: 30px;
  }
  .footer {
    text-align: center;
    margin-top: 30px;
  }
}
</style>
